<script setup lang="ts">
// import { Menu as IconMenu, User } from '@element-plus/icons-vue';
import { dateUtils } from 'my-ts-core';
import { useAuthenticationStore } from 'my-vue-core/stores';
import { AuthenticationService } from 'my-web-core/auth';
import type { MenuItem } from 'my-web-core/models';
import { MenuService } from 'my-web-core/services';
import { defineAsyncComponent, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import router from '@/app-router';
import AuthService from '@/features/authentication/services/auth-service';
import UserAvatar from '@/features/users/components/UserAvatar.vue';

const MenuItemList = defineAsyncComponent(() => import('@/shared/components/MenuItemList.vue'));
const route = useRoute();
const authenticationStore = useAuthenticationStore();
const menuItems = ref<MenuItem[]>([]);

onMounted(() => {
  loadMenuItems();
});

async function loadMenuItems(): Promise<void> {
  menuItems.value = await MenuService.getLocalMenuItemConfig();
}

function logout(): void {
  new AuthService().logout();
  router.push('/authentication/login');

  authenticationStore.changeIsAuthenticated(
    AuthenticationService.isAuthenticated,
  );

  authenticationStore.changeCurrentUser(AuthenticationService.currentUser);
}
</script>

<template>
  <el-container class="main-container">
    <el-header v-if="authenticationStore.isAuthenticated">
      <img src="/assets/images/logo.png" class="logo" alt="logo" />
      <h3 class="header-title">平台管理系统</h3>
      <div class="header-user">
        <el-dropdown>
          <!-- defineAsyncComponent of UserAvatar will cause _a2.getBoundingClientRect is not a function error since element-plus 2.2.32 -->
          <UserAvatar
            :user="authenticationStore.currentUser!"
            style="color: #fff"
          />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>修改资料</el-dropdown-item>
              <el-dropdown-item divided @click="logout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px" v-if="authenticationStore.isAuthenticated">
        <el-menu
          :default-active="route.path"
          :default-openeds="['/user']"
          router
        >
          <template v-for="item in menuItems">
            <template v-if="item.children?.length">
              <el-sub-menu :index="item.route">
                <template #title>
                  <span>{{ item.title }}</span>
                </template>
                <MenuItemList :menu-items="item.children" />
              </el-sub-menu>
            </template>
            <template v-else>
              <el-menu-item :index="item.route">
                <template #title>{{ item.title }}</template>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
        <!-- <el-menu :default-active="route.path" :default-openeds="['/user']" router>
                              <el-menu-item index="/home">
                                <el-icon>
                                  <icon-menu />
                                </el-icon>
                                <template #title>首页</template>
                              </el-menu-item>
                              <el-sub-menu index="/user">
                                <template #title>
                                  <el-icon>
                                    <User />
                                  </el-icon>
                                  <span>用户</span>
                                </template>
                                <el-menu-item-group>
                                  <el-menu-item index="/users/list">列表</el-menu-item>
                                </el-menu-item-group>
                              </el-sub-menu>
                            </el-menu> -->
      </el-aside>
      <el-container
        :style="
          authenticationStore.isAuthenticated ? { padding: '0 24px 10px' } : {}
        "
      >
        <el-main
          :style="
            authenticationStore.isAuthenticated
              ? {
                  background: '#fff',
                  padding: '24px',
                  margin: 0,
                  minHeight: '280px',
                }
              : { padding: '0px' }
          "
        >
          <router-view />
        </el-main>
        <el-footer v-if="authenticationStore.isAuthenticated"
          >Element Plus ©{{
            dateUtils.getCurrentDate().getFullYear()
          }}
          Created by Community</el-footer
        >
      </el-container>
    </el-container>
  </el-container>
</template>

<style scoped>
.main-container {
  background-color: #f0f2f5;
  min-height: 100vh;
}

.el-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #fff;
  background-color: #001529;
  height: 64px;
  padding: 0 50px;
}

.el-menu {
  height: 100%;
}

.el-footer {
  height: 32px;
  padding: 14px 0px;
}

.logo {
  width: 50px;
  height: 50px;
  margin-top: 6px;
}

.header-title {
  margin-left: 10px;
}

.header-user {
  margin-left: auto;
}

.footer {
  text-align: left;
  padding: 10px 0px 0px 0px;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
